<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统</title>
    <link rel="stylesheet" type="text/css"
          th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/toastr.css}">
    <script type="text/javascript" th:src="@{https://code.jquery.com/jquery-3.3.1.slim.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script type="text/javascript"
            th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/toastr.js}"></script>
</head>
<style>
    li {
        font-size: 1.4rem;
    }
    .toast-center-center {
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -150px;
    }
    p {
        font-size: 1.5rem;
    }
</style>
<body>
<div th:replace="home/index :: navbar"></div>
<div style="margin-top: 100px">
    <input hidden="hidden" id="userId" th:value="${session.user.userId}">
    <div class="jumbotron">
        <h1 class="display-3" th:text="${session.user.userName}"></h1>
        <p th:text="'账号:'+${session.user.userAccount}"></p>
        <hr class="my-4">
        <p th:text="'电话:'+${session.user.userTel}"></p>
        <p th:text="${session.user.userSex}==0?'性别:女':'性别:男'"></p>
        <p class="lead">
            <button type="button" class="btn btn-outline-primary btn-lg " data-toggle="modal"
                    data-target="#exampleModalCenter2">修改信息
            </button>
            <button type="button" class="btn btn-outline-primary btn-lg " data-toggle="modal"
                    data-target="#exampleModalCenter"
                    style="margin-left: 60px">修改密码
            </button>
        </p>
    </div>

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">修改信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container my-5">
                        <form action="/addMatch">
                            <div class="form-row">

                                <div class="form-group col-12">
                                    <label for="oldPsw">原密码：</label>
                                    <input type="password" id="oldPsw" placeholder="请输入原密码" class="form-control">
                                </div>

                                <div class="form-group col-12">
                                    <label for="userPsw">新密码：</label>
                                    <input type="password" id="userPsw" placeholder="请输入新密码" class="form-control">
                                </div>

                                <div class="form-group col-12">
                                    <label for="userPsw2">再次输入新密码：</label>
                                    <input type="password" id="userPsw2" placeholder="请再次输入新密码" class="form-control">
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-outline-primary" id="updatePsw">确认修改</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle2" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle2">修改信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container my-5">
                        <form action="/addMatch">
                            <div class="form-row">

                                <div class="form-group col-12">
                                    <label for="userName">我的名称：</label>
                                    <input type="text" id="userName" th:value="${session.user.userName}"
                                           placeholder="请输入我的名称" class="form-control">
                                </div>

                                <div class="form-group col-12">
                                    <label for="userTel">我的电话：</label>
                                    <input type="tel" id="userTel" th:value="${session.user.userTel}"
                                           placeholder="请输入手机号码" class="form-control">
                                </div>

                                <div class="form-group col-12">
                                    <label for="userSex">我的性别：</label>
                                    <select class="form-control" id="userSex">
                                        <option value="0">女</option>
                                        <option value="1">男</option>
                                    </select>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-outline-primary" id="updateInfo">确认修改</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        toastr.options = {
            closeButton: false,
            debug: false,
            progressBar: true,
            positionClass: "toast-center-center",
            onclick: null,
            showDuration: "300",
            hideDuration: "1000",
            timeOut: "2000",
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };

        var pattern = /^1[34578]\d{9}$/;
        $('#updateInfo').click(function () {
            if ($('#userName').val().length == 0) {
                $('#userName').focus();
                toastr.error('姓名不能为空');
                return false;
            }
            if ($('#userTel').val().length == 0) {
                $('#userTel').focus();
                toastr.error('号码不能为空');
                return false;
            }
            if (!pattern.test($('#userTel').val())) {
                $('#userTel').focus();
                toastr.error('号码格式有误');
                return false;
            }

            if ($('#userSex').val().length == 0) {
                $('#userSex').focus();
                toastr.error('性别不能为空');
                return false;
            }
            $.ajax({
                url: '/updateInfo',
                type: 'POST',
                dataType: 'json',
                data: {
                    "userId": $('#userId').val(),
                    "userName": $('#userName').val(),
                    "userTel": $('#userTel').val(),
                    "userSex": $('#userSex').val()
                },
                success: function (res) {
                    if (res.code == 0) {
                        toastr.success('修改信息成功');
                        $('#exampleModalCenter').modal('hide');
                        window.setTimeout("window.location.reload()", 1000);
                    } else {
                        toastr.error('修改信息失败');
                        $('#exampleModalCenter').modal('hide')
                    }
                }
            })
        })


        $('#updatePsw').click(function () {
            if ($('#oldPsw').val().length == 0) {
                $('#oldPsw').focus();
                toastr.error('旧密码不能为空');
                return false;
            }
            if ($('#userPsw').val().length == 0) {
                $('#userPsw').focus();
                toastr.error('新密码不能为空');
                return false;
            }
            if ($('#userPsw2').val().length == 0) {
                $('#userPsw2').focus();
                toastr.error('新密码不能为空');
                return false;
            }
            if ($('#userPsw').val() != $('#userPsw2').val()) {
                $('#userPsw').focus();
                toastr.error('两次密码不一致');
                return false;
            }
            if ($('#oldPsw').val().length < 6 || $('#userPsw').val().length < 6
                || $('#userPsw2').val().length < 6) {
                toastr.error('密码长度必须大于6位');
                return false;
            }
            if ($('#oldPsw').val() == $('#userPsw').val()) {
                toastr.error('新密码与旧密码重复');
                return false;
            }
            $.ajax({
                url: '/updatePsw',
                type: 'POST',
                dataType: 'json',
                data: {
                    "oldPsw": $('#oldPsw').val(),
                    "userPsw": $('#userPsw').val(),
                    "userId": $('#userId').val()
                },
                success: function (res) {
                    if (res.code == 0) {
                        toastr.success('修改密码成功,请您重新登录');
                        $('#exampleModalCenter').modal('hide');
                        window.setTimeout("window.location.href='/quit'", 2000);
                    } else if (res.code == 222) {
                        toastr.error(res.msg);
                    } else {
                        toastr.error('修改密码失败');
                        $('#exampleModalCenter').modal('hide')
                    }
                }
            })
        })
    });
</script>
</html>